<template>
  <div class="add-form">
    <div class="nb-tittle">{{ title }}</div>
    <el-form ref="form" :model="data" inline label-width="120px" hide-required-asterisk class="hx-form" :rules="rules">
      <div class="contract-form">
        <el-row :span="9">
          <el-form-item label="选择项目：" prop="project_id">
            <v-select v-model="data.project_id" style="width: 160px" action="projectList" :query="{ status:4 }" @change="getBid" />
          </el-form-item>
          <el-form-item label="发标单位：">
            <el-input v-model="data.agent" style="width: 160px" />
          </el-form-item>
        </el-row>
        <el-row :span="9">
          <el-form-item label="合同编号：" prop="code">
            <el-input v-model="data.code" class="w160" />
          </el-form-item>
          <el-form-item label="付款方式：" prop="pay_method_id">
            <el-select v-model="data.pay_method_id" placeholder="请选择" class="w160">
              <el-option v-for="item in payMethodIdOption" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-row>
        <el-row :span="9">
          <el-form-item label="投标金额：">
            <el-input v-model="data.bid_sum" readonly class="w160" />
          </el-form-item>
          <el-form-item label="签订日期：" prop="signed_date">
            <el-date-picker v-model="data.signed_date" type="date" class="w160" placeholder="选择日期" value-format="yyyy-MM-dd" />
          </el-form-item>
        </el-row>
        <el-row :span="9">
          <el-form-item label="法定代表人：" prop="legal_person">
            <el-input v-model="data.legal_person" class="w160" />
          </el-form-item>
          <el-form-item label="授权代表人：" prop="representative">
            <el-input v-model="data.representative" class="w160" />
          </el-form-item>
        </el-row>
        <el-row :span="9">
          <el-form-item label="回款次数：" prop="times">
            <el-input-number v-model="data.times" class="w160" controls-position="right" />
          </el-form-item>
          <el-form-item label="电话：" prop="mobile">
            <el-input v-model="data.mobile" class="w160" />
          </el-form-item>
        </el-row>
        <el-row :span="18">
          <el-form-item label="地址：" prop="address">
            <el-input v-model="data.address" style="width: 452px" />
          </el-form-item>
        </el-row>
      </div>
      <el-row>
        <el-row>
          <el-form-item v-if="editId" label="上传附件：">
            <Adjunct table_name="contract" :pk="editId" class="detail-input" />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="备注:">
            <el-input
              v-model="data.content"
              type="textarea"
              style="width: 452px"
              :rows="2"
              placeholder="请输入内容"
            />
          </el-form-item>
        </el-row>
      </el-row>
      <el-form-item style="margin:40px 20px 0">
        <el-button type="primary" @click="submitForm('form')">提交</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import API from '@/api/contract/contract'
import VSelect from '@/components/select'
import BidApi from '@/api/bid/bid'
import Adjunct from '@/components/Upload/Adjunct'
import { payMethodIdOption } from '@/utils/options'
export default {
  inject: ['goUrl', 'isEdit', 'add', 'update', 'isNumeric', 'setStorage', 'clearStorage', 'getStorage'],
  components: { VSelect, Adjunct },
  data() {
    return {
      data: {
        actual_sum: '',
        pay_method_id: '',
        agent: '',
        bid_sum: '',
        type: 1
      },
      activeName: 'first',
      title: '',
      editId: '',
      rules: {
        pay_method_id: { required: true, message: '请选择付款方式', trigger: 'change' },
        code: { required: true, message: '请输入编号', trigger: 'change' },
        signed_date: { required: true, message: '请输入签订日期', trigger: 'change' },
        legal_person: { required: true, message: '请输入法人代表', trigger: 'change' },
        mobile: { required: true, message: '请输入电话', trigger: 'change' },
        representative: { required: true, message: '请输入授权代表人', trigger: 'change' }
      },
      payMethodIdOption
    }
  },
  created() {
    const edit = this.isEdit()
    if (edit) {
      this.editId = edit
      this.info()
    } else {
      this.title = '新增收入合同'
      if (this.getStorage('contract')) {
        this.data = this.getStorage('contract')
      }
    }
  },
  mounted() {
    window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
  },
  methods: {
    info() {
      API.detail(this.editId).then(res => {
        this.data = res.data
        this.title = '收入合同详情'
      })
    },
    beforeunloadHandler(e) {
      this.clearStorage('contract')
    },
    cancel() {
      if (!this.editId) {
        this.setStorage('contract', this.data)
      }
      this.goUrl('/contract')
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.editId) {
            this.update(API, this.data, '更新成功')
          } else {
            this.add(API, this.data, '新增成功', '/contract/edit/')
            this.clearStorage('contract')
          }
        } else {
          return false
        }
      })
    },
    getBid() {
      const query = {
        project_id: this.data.project_id
      }
      BidApi.bidList(query).then(res => {
        // console.log(...res.data.data)
        const { bid_sum } = res.data.data[0]
        this.data.bid_sum = bid_sum
      })
    }
  }
}
</script>
<style scoped>
.w160{
  width: 160px;
}
.contract-form {
  width: calc(100% - 120px);
}
</style>
